<!DOCTYPE html>
<html lang="en">
<head>
    <!--定义网页编码-->
    <meta charset="UTF-8">
    <!--
        1. width=device-width表示显示的宽度为当前物理设备的宽度;
        2. initial-scale=1表示原始比例.
    -->
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Bootstrap</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
        body {
            padding-top: 50px;
        }
        /*
            1. padding元素用来设置元素边距, 有多重设置方法:
                - 方式1:
                    1. 代码: `padding:10px 5px 15px 20px;`
                    2. 说明: 上填充是 10px, 右填充是 5px, 下填充是 15px, 左填充是 20px;
                - 方式2:
                    1. 代码: `padding:10px 5px 15px;`;
                    2. 说明: 上填充是 10px, 右填充和左填充是 5px, 下填充是 15px;
                - 当时3:
                    1. 代码: `padding:10px 5px;`;
                    2. 说明: 上填充和下填充是 10px, 右填充和左填充是 5px.

        */
        .starter {
            padding: 40px 15px;
            text-align: center;
        }
    </style>
</head>
<body>
    <!--
        1. navbar-default   表示白色主题
            - 如果值为navbar-inverse, 导航栏的主题就会变为黑色;
        2. navbar-fixed-top使用来控制当前导航栏显示在页面顶端的;
            - 如果设置为navbar-fixed-bottom, 则该导航栏会显示在页面底部.
    -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <!--container表示一个容器-->
        <div class="container">
            <!--navbar-header表示导航条的头部-->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">project name</a>
            </div>
            <!--collapse navbar-collapse表示导航条的中间部分-->
            <div id="navbar" class="collapse navbar-collapse">
                <ur class="nav navbar-nav">
                    <!--
                        1. class="active"表示当前li默认为选中状态;
                        2. 习惯在<li>标签中放置<a>标签, 使可点击;
                    -->
                    <li class="active"><a href="#">Home1</a></li>
                    <li><a href="#">Home2</a></li>
                    <li><a href="#">Home3</a></li>
                </ur>
            </div>
        </div>
    </nav>
<div class="container">
    <div class="starter">
        <h1>bootstrap template starter</h1>
        <p class="lead">换迎学习bootstrap</p>
    </div>
</div>
</body>
</html>